
  <template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" :can-add="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
        <Col span="6"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="6"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
        <Col span="6"><OrganizationTree ref="srhOrgSelect" v-model="queryParam.where.orgId" width="200px"></OrganizationTree> </Col>
      </Row>
    </SearchHeader>

    <Card>
      <Table border :columns="columns" :data="tableData">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('delete')" icon="md-trash" @click="remove(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="state">
          <span v-if="row.state==1" style="color: green" >{{$t('device_status_1')}}</span>
          <span v-if="row.state==2" style="color: #ed4014" >{{$t('device_status_2')}}</span>
          <span v-if="row.state==3" style="color: #BB5E26" >{{$t('device_status_3')}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="online">
          <span v-if="row.online" style="color: green" >{{$t('online')}}</span>
          <span v-if="!row.online" >{{$t('offline')}}</span>
        </template>
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="getData"></TopnavPage>
    </Card>
    <SiteEdit ref="siteEdit"></SiteEdit>
  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import {queryPage,removeSite} from '@/api/site';
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import SiteEdit from "@/view/Device/SiteEdit";
import {apiResult, clone} from '@/libs/util'
import AuthCheck from "@/api/AuthCheck";
export default {
  name: "site",
  components:{OrganizationTree,TopnavPage,SearchHeader,SiteEdit},
  computed:{
    columns(){
      return [{title: this.$t('operate'), key: 'action', width: 150,slot: 'action',align: 'center'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 175},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: 'IP', key: 'host', sortable: true, width: 150},
        {title: this.$t('port'), key: 'port', sortable: true, width: 150},
        {title: this.$t('play_url'), key: 'url', sortable: true, width: 150},
        {title: this.$t('organization'), key: 'orgName', sortable: true, width: 150},
        {title: this.$t('status'), key: 'state', sortable: true, width: 100,slot: 'state'},
        {title: this.$t('online'), key: 'online', sortable: true, width: 100,slot: 'online'},
        {title: this.$t('manufacturer'), key: 'manufacture', sortable: true, width: 175},
        {title: this.$t('firmware_ver'), key: 'softVersion', sortable: true, width: 200}]
    }
  },
  data(){
    return{
      canModify: false,
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {keyword:null,code: null, name: null, type: 1, orgId: null, host: null},
        init: ()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          this.queryParam.where.type=1;
          this.queryParam.where.orgId=null;
          this.queryParam.where.host=null;
        }
      },
      tableData:[],
      rowData: {},
    }
  },
  methods:{
    getData(){
      /** 生成查询条件 */
      this.queryParam.where.type=1;
      queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;
        })

      })
    },
    add() {
      let row={
        id: null,
        code: null,
        name: null,
        type: 1, //采集站
        orgId: null,
        host: null,
        port: 8080,
        url: null,
        manufacture: null,
        softVersion: null,
        orgName: null,
        state: 1,
      }
      this.$refs.siteEdit.openDialog("ADD",row, this.getData);
    },
    edit(row) {
      this.$refs.siteEdit.openDialog("EDIT",clone(row), this.getData);
    },
    view(row) {
      this.$refs.siteEdit.openDialog("VIEW",clone(row), this.getData);
    },

     remove(row){
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          removeSite({id:row.id}).then(res=>{
            apiResult(res.data,true,result=>{
              this.getData();
            })

          });
        },
        onCancel: () => {}
      });
    },
  },
  mounted(){
    this.canModify = new AuthCheck().collectSiteRegEdit();
    this.getData();
  }
}
</script>
<style lang="less">
  //@import "../../my-theme/template";
</style>
